<template>
    <div>
        <van-sticky>
            <van-button class="left" round icon="arrow-left" type="primary" @click="onLeft"  />
        </van-sticky>
        <div class="main">
            <img :src="merch.merchImage">
            <p class="d1">{{merch.merchName}}</p>
            <p class="d2">￥{{merch.merchPrice}}</p>
            <van-divider />
            <div class="d3">
                <van-icon class="ico" name="bag-o" />正品保障
                <van-icon class="ico" name="shopping-cart-o" />快速发货
                <van-icon class="ico" name="friends-o" />售后无忧
            </div>
            <div class="fgx"></div>
            <p class="xq">周边详情</p>
            <p class="d4">{{merch.merchDetails}}</p>
            <div class="warn">
                <p class="xq">购买须知</p>

                <img src="../assets/zbxq.png" alt="">
            </div>
        </div>

        <van-action-bar class="buy">
            <van-action-bar-icon icon="like-o" text="收藏" @click="col" />
            <van-action-bar-button type="danger" text="立即购买" @click="btn" />
        </van-action-bar>
    </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant';
import router from '@/router';
    export default {
        setup() {
            const onClickIcon = () => Toast('收藏');
            const onClickButton = () => Toast('购买');
            const onLeft = () => history.back();
            return {
                onClickIcon,
                onClickButton,
                onLeft,
            };
        },
        props:[
            "merchName","merchImage","merchPrice","merchId"
        ],
        data() {
            return {
                merch: [],
                id: this.$route.params.id,
            }
        },
        created() {
            axios.get('http://localhost:8087/merch/getById/'+this.id).then((res)=>{
                this.merch = res.data.data;
                console.log(this.merch);
                console.log(res);
            })
        },
        methods: {
            btn(){
                axios.post('http://localhost:8087/buyMerch/add', {
                    id: Math.random()*1000000,
                    userId: sessionStorage.getItem('userId'),
                    merchId: this.merch.merchId,
                    name: this.merch.merchName,
                    merchNumber: this.merch.merchPrice,
                    merchImage: this.merch.merchImage,
                }).then(function() {
                    // router.push('/ppc')
                    Toast.success('购买成功');
                }).catch(function (error) {
                    console.log(error);
                })
            },
            col(){
                axios.post('http://localhost:8087/collection/saveCollection', {
                    collectionId: Math.random()*1000000,
                    collectionMerch: this.merch.merchName,
                    merchPrice: this.merch.merchPrice,
                    merchImg: this.merch.merchImage,
                }).then(function() {
                    // router.push('/ppc')
                    Toast({
                        message: '收藏成功',
                        icon: 'like-o',
                    });
                }).catch(function (error) {
                    console.log(error);
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .main{
        position: relative;
        img{
            position: relative;
            top: -11vw;
            width: 100vw;
            height: 90vw;
        }
        .d1{
            font-size: 4vw;
            text-align: left;
            margin-left: 6vw;
            margin-right: 6vw;
            font-weight: bold;
        }
        .d2{
            text-align: left;
            margin-left: 6vw;
            margin-top: 4vw;
            font-size: 6vw;
            color: red;
            font-weight: bold;
        }
        .d3{
            padding-top: 3vw;
            text-align: left;
            font-size: 4vw;
            margin-left: 1vw;
            font-weight: bold;
            .ico{
                padding-left: 6vw;
                font-weight: bold;
            }
        }
        .fgx{
            height: 2vw;
            background-color: rgb(246, 246, 246);
            margin-top: 5vw;
        }
        .xq{
            font-weight: bold;
            font-size: 5vw;
            text-align: left;
            margin-left: 6vw;
            margin-top: 8vw;
        }
        .d4{
            // font-weight: bold;
            font-size: 4vw;
            text-align: left;
            margin-left: 6vw;
            margin-right: 5vw;
            margin-top: 5vw;
        }
        .warn{
            padding-top: 4vw;
            img{
                width: 100vw;
                height: 50vw;
            }
        }
    }

    .buy{
        z-index: 3;
    }
    ::v-deep .left {
        width: 10vw;
        color: black;
        font-size: 5vw;
        font-weight: bold;
        background-color: #fff;
        border-color: #ddd;
        left: -41vw;
        top: 4vw;
        z-index: 9;
    }
</style>